<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>银行APP云闪付版焕新升级</title>
    <link rel="stylesheet" href="css/all.min.css">
</head>

<body>
    <div class="wrap-box">
        <div class="prize-content content-box">
            <div class="prize-cont-box">
                <div class="max-width-560">
                    <img src="images/prize-title.png" alt="银行APP云闪付版">
                </div>
                <ul class="prize-list">
                    <!-- prize-id和抽奖界面后台返回的奖项id一一对应 1/3/4/6/7 都为不中奖 -->
                    <li data-prize-id="1"> <img src="images/prize-comeon.png" alt="明天加油"> </li>
                    <!-- <li data-prize-id="0"> <img src="images/prize-thank.png" alt="感谢您的参与"> 活动最后一天没中奖显示的图片 </li> -->
                    <!-- <li data-prize-id="7"> <img src="images/prize-comeon.png" alt="明天加油"> </li> -->
                    <li data-prize-id="2"> <img src="images/prize-2.png" alt="京东E卡200元"> </li>
                    <!-- <li data-prize-id="5"> <img src="images/prize-5.png" alt="京东E卡100元"> </li> -->               
                    <li data-prize-id="8"> <img src="images/prize-8.png" alt="华为P50"> </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 奖品弹框 start -->  
     <!-- 1 没有中奖用户都获得的参与奖 -->
     <div class="modalbox" id="awordsResult1">
        <div class="modalbox-mask"></div>
        <div class="modalbox-cont">
            <span class="close"></span>
            <div class="inner-box">
                <div class="card"> <img src="images/prize-card-1.png"> </div>
                <div class="f15">
                    指定银行APP（云闪付版）<br/>
                    享中石油满200元立减20元优惠 <br/>
                    屈臣氏满80元立减20元优惠 <br/>
                    活动截止于2022年12月31日
                </div>
                <div class="modalbox-btn">
                    <a href="http://www.bankappupgrade.com/#/"><img src="images/more-btn.png" alt="了解活动详情"></a>
                </div>
            </div>
        </div>
    </div>

    <!-- 2 京东e卡 实物发放奖励 -->
    <div class="modalbox" id="awordsResult2">
        <div class="modalbox-mask"></div>
        <div class="modalbox-cont">
            <span class="close"></span>
            <div class="inner-box">
                <div class="card"> <img src="images/prize-card-2.png"> </div>
                <div class="tips">您的奖品将于中奖名单公布的30个工作日内寄出</div>
                <div class="modalbox-form">
                    <div class="item">
                        <label class="label">姓名</label> <input type="text" class="input">
                    </div>
                    <div class="item">
                        <label class="label">手机号</label> <input type="text" class="input">
                    </div>
                    <div class="item">
                        <label class="label">地区</label> <input type="text" class="input">
                    </div>
                    <div class="item">
                        <label class="label">详细地址</label> <input type="text" class="input">
                    </div>
                    <div class="txt">收件地址填写后无法进行修改，<br/>
                        请确认信息无误。</div>
                </div>
                <div class="modalbox-btn">
                    <a href="javascript:void(0)" class="J-submit-btn"><img src="images/comfirm-btn.png" alt="了解活动详情"></a>
                </div>
            </div>
            <!-- <img src="images/modalbox-bg.png"> -->
        </div>
    </div>
    <!-- // end -->

    <script src="js/Zepto.1.2.0.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="js/common.js"></script>
    <script>
        
         isGoToIndex()  // 判断是否要去到首页 如果已经本地已经有localStorage.getItem('ipnone')

         $(function () {       
            $('.prize-list li').click(function () {
                let self = $(this)
                let prizeId = self.data('prize-id');
                lotteryPopRender(prizeId)
            })

            function lotteryPopRender(id) {
                //console.log("恭喜您中奖啦，奖品是" + opts.LotteryContent)
                var nub = id,// 弹框序号
                    imgNub = id;
                
                if(id==0) return

                if(id == 3 || id == 4 || id == 6 || id == 7){
                    nub = 1   
                    imgNub =  id == 3 || id == 7 ? 3 : 1;             
                }
                if(id == 5 || id == 8){
                    nub = 2
                }
                $('#awordsResult'+nub).find('.card img').attr('src','images/prize-card-'+imgNub+'.png')
  
                var modalboxParams = {
                    container:$('#awordsResult'+nub)
                }
                modalboxOpend(modalboxParams)
            } 

            // 填写地址信息提交
            $('body').on('click','.J-submit-btn',userInforSubmit)
            function userInforSubmit(){

                let phoneReg = /^1[3456789]\d{9}$/;
                let name = $('#name').val().trim(),
                    phone = $('#phone').val().trim(),
                    area = $('#area').val().trim(),
                    address = $('#address').val().trim();
                // console.log(phoneReg.test(phone))
                if(!name){
                    txtTipsPop('请填写正确的姓名',function(){
                        $('#name').focus()
                    });            
                    return false
                }
                if(!phone || !phoneReg.test(phone)){
                    txtTipsPop('请填写正确的手机号码',function(){
                        $('#phone').focus()
                    })                
                    return false
                }
                if(!area){
                    txtTipsPop('请填写地区',function(){
                        $('#area').focus()
                    })               
                    return false
                }
                if(!address){
                    txtTipsPop('请填写详细地址',function(){
                        $('#address').focus()
                    })                
                    return false
                } 
                // 前台验证结束

                // 提交后台服务器，成功则执行以下方法，给一个提示
                txtTipsPop('信息提交成功，奖品将于名单公布后的30个工作日内寄出',function(){
                    // 关闭表单提交，看是否需要关闭，后台根据客户需求自主去调试
                    // do something 如果需要关闭表单弹框，打开注释，执行以下代码
                    // $('.modalbox').removeClass('opened') // 关闭所有弹框
                },'success')

            }

        })
    </script>
    <script src="js/wx_share.js"></script>

</body>

</html>